<template>
    <div style="width: 100%; display: flex; justify-content: space-between;">
        <el-space style="display: flex;">
            <el-tag size="large" type="warning" effect="plain"> Key {{ node.key }}</el-tag>
            <el-tag v-if="!!node.lease" size="large" type="danger" effect="plain"> Lease {{ node.lease }}</el-tag>
        </el-space>
        <el-button-group >
            <el-button type="primary" plain @click="prettyJson">Json</el-button>
            <el-button type="primary" plain @click="prettyXml">XML</el-button>
        </el-button-group>
    </div>
    <mavon-editor :style="{ height: '93%',marginTop:'10px',marginBottom:'0px'}"
                  v-if="!node.dir"
                  v-model="node.value"
                  defaultOpen="edit"
                  :toolbars="toolbars"
                  :lineNumbers="true"
                  @save="save">
    </mavon-editor>
</template>
<script setup>
import {ref} from "vue";
import {mavonEditor} from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import {ElMessage} from 'element-plus'
import {kv_put} from "@/api/etcd3.js"
import {Base64} from "js-base64";
import xmlBeautifier from 'xml-beautifier';

const props = defineProps({
    node: {
        type: Object,
        default: {
            dir: false,
            key: 'string',
            name: 'string',
            value: 'string',
            ttl: 'string',
            createdIndex: 'string',
            modifiedIndex: 'string'
        }
    },
    connect: {
        type: Object,
        default: {
            name: '默认标题',
            url: 'http://127.0.0.1:2379',
            version: 'v2',
            username: 'root',
            password: '123456'
        }
    }
})

const toolbars = ref({
    bold: false, // 粗体
    italic: false, // 斜体
    header: false, // 标题
    underline: false, // 下划线
    strikethrough: false, // 中划线
    mark: false, // 标记
    superscript: false, // 上角标
    subscript: false, // 下角标
    quote: false, // 引用
    ol: false, // 有序列表
    ul: false, // 无序列表
    link: false, // 链接
    imagelink: false, // 图片链接
    code: false, // code
    table: false, // 表格
    fullscreen: false, // 全屏编辑
    readmodel: false, // 沉浸式阅读
    htmlcode: false, // 展示html源码
    help: false, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: false, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: false, // 导航目录
    /* 2.1.8 */
    alignleft: false, // 左对齐
    aligncenter: false, // 居中
    alignright: false, // 右对齐
    /* 2.2.1 */
    subfield: false, // 单双栏模式
    preview: false // 预览
})

function show() {
    ElMessage.success(JSON.stringify(props.node))
    console.log(props.node.value)
}

function save() {
    let url = props.connect.url;
    let key = props.node.key;
    let value = props.node.value;
    let data = {
        key: Base64.encode(key),
        value: Base64.encode(value),
        ignore_lease: true
    }
    kv_put(url, data)
        .then((response) => {
            ElMessage.success('Update success')
        })
        .catch((reason) => {
            let error = reason.response.data;
            let message = error.cause + ' ' + error.message;
            ElMessage.error(message)
        });
}

function prettyJson(){
    let json = props.node.value;
    try {
        props.node.value = JSON.stringify(JSON.parse(json), null, 2);
        ElMessage.success("json pretty success");
    }catch (e){
        ElMessage.error(e.message);
    }
}


function prettyXml() {
    let xml = props.node.value;
    try {
        props.node.value = xmlBeautifier(xml);
        ElMessage.success("xml pretty success");
    }catch (e){
        ElMessage.error(e.message);
    }
}

</script>
<style scoped>
.editor-footer {
    padding: 10px;
    background-color: #f0f0f0;
    text-align: center;
    border-top: 1px solid #ccc;
}
</style>